<!--
 * @Author: dingpanfeng
 * @Date: 2021-01-08 16:02:14
 * @LastEditors: dingpanfeng
 * @LastEditTime: 2021-01-11 16:08:18
 * @FilePath: /pmis-project/src/views/project/components/snackLine.vue
-->
<template>
  <div class="main-snakLine">
    <div class="snakLine">
      <div v-if="data.length" class="begin-circle" />
      <ul class="main-box">
        <template v-if="data.length">
          <template v-for="(row, index) in data">
            <el-tooltip :key="row.id" placement="left-start">
              <template slot="content">
                <p>
                  <span class="title">名称:</span><span class="message">{{ row.name }}</span>
                </p>
                <p>
                  <span class="title">审批人:</span>
                  <span class="message">{{ row.assignee }}</span>
                </p>
                <p>
                  <span class="title">审批状态:</span>
                  <span class="message">{{ row | getApprovalStatusName }}</span>
                </p>
                <template v-if="row.endTime">
                  <p>
                    <span class="title">审批时间:</span><span class="message">{{ row.endTime }}</span>
                  </p>
                  <p v-if="row.comment && row.comment.length">
                    <span class="title">审批意见:</span><span class="message">{{
                      row.comment[0].fullMessage
                    }}</span>
                  </p>
                  <p>
                    <span class="title">耗时:</span><span class="message">{{ row.duration | transTime }}</span>
                  </p>
                </template>
                <template v-else>
                  <!--  -->
                </template>
              </template>
              <li
                :class="{
                  reject: !row.audit && row.endTime,
                  process: !row.endTime,
                  unstart: !row.startTime
                }"
              >
                <p>
                  <span class="title">名称:</span><span class="message">{{ row.name }}</span>
                </p>
                <p>
                  <span class="title">审批人:</span>
                  <span class="message">{{ row.assignee }}</span>
                </p>
                <p>
                  <span class="title">审批状态:</span>
                  <span class="message">{{ row | getApprovalStatusName }}</span>
                </p>
                <p>
                  <span class="title">审批方式:</span>
                  <span class="message">{{ row.multiApproveMode === 1 ? '会签' : '或签' }}</span>
                </p>
                <template v-if="row.endTime">
                  <p>
                    <span class="title">审批时间:</span><span class="message">{{ row.endTime }}</span>
                  </p>
                  <p v-if="row.comment && row.comment.length">
                    <span class="title">审批意见:</span><span class="message">{{
                      row.comment[0].fullMessage
                    }}</span>
                  </p>
                  <p>
                    <span class="title">耗时:</span><span class="message">{{ row.duration | transTime }}</span>
                  </p>
                  <!-- 隐藏验收通过状态下显示的项目验收评价表 -->
                  <!-- <p v-if="row.taskAttachments && row.taskAttachments.length">
                    <el-button
                      v-for="item in row.taskAttachments"
                      :key="item.id"
                      size="small"
                      type="text"
                      @click="toDetail(item.url)"
                    >{{ item.name }}</el-button>
                  </p> -->
                </template>
                <template v-else>
                  <!--  -->
                </template>
                <!-- <i
                  v-if="!row.startTime && email === row.createdBy"
                  class="el-icon-circle-close"
                  @click="
                    deleteSign({
                      businessKey: id,
                      assignee: row.email,
                      taskDefinitionKey: row.taskDefinitionKey,
                      tenantId: tenantId
                    })
                  "
                /> -->
              </li>
            </el-tooltip>
            <template v-if="row.nextEquals" />
            <el-button
              v-else-if="row.endTime"
              :key="index"
              circle
              style="width: 40px;margin: 0 auto;"
              :type="row.audit ? 'primary' : 'danger'"
              :icon="row.audit ? 'el-icon-check' : 'el-icon-close'"
            />
            <el-button
              v-else
              :key="index"
              circle
              style="width: 40px;margin: 0 auto;"
              type="warning"
              icon="el-icon-loading"
            />
          </template>
        </template>
        <template v-else>
          <el-alert
            title="尚未查到该流程的任何流程历史"
            type="warning"
            description="请检查该条单据是否已经和流程集成,以及单据的BusinessKey是否存在"
            show-icon
            :closable="false"
            effect="dark"
          /></template>
      </ul>
      <div v-if="data.length" class="end-circle" />
    </div>
  </div>
</template>
<script>
export default {
  filters: {
    // 获取当前审批状态
    getApprovalStatusName(row) {
      if (row.endTime) {
        if (row.audit) {
          return '同意'
        } else {
          return '不同意'
        }
      } else {
        return '审批中'
      }
    },
    transTime(value) {
      if (value) {
        const arr = value.split(':')
        if (arr.length === 3) {
          return arr[0] + '时' + arr[1] + '分' + arr[2] + '秒'
        }
        return ''
      }
      return ''
    }
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    id: {
      type: String,
      default: ''
    },
    tenantId: {
      type: String,
      default: ''
    },
    email: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  methods: {
    toDetail(url) {
      window.open(url, '_blank') // 打开新地址
    },
    // 减签
    deleteSign(data) {
      this.$emit('deleteSign', data)
    }
  }
}
</script>
<style lang="scss" scoped>
.main-snakLine {
  width: 100%;
  min-width: 500px;
  height: 100%;
  margin: 0px auto;
  padding: 20px;
  overflow: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  display: flex;
}
.snakLine {
  width: 100%;
  position: relative;
  margin: 40px 0;
}
.snakLine::before {
  content: '';
  width: 4px;
  height: 100%;
  background-color: #216ef4;
  position: absolute;
  left: 0;
  top: 0;
  left: calc(50% - 2px);
}
.snakLine:last-child::after {
  border: 0 !important;
  display: none !important;
}
.snakLine:nth-child(even)::before {
  width: calc(100% - 100px);
  left: 50px;
  margin-right: 50px;
  margin-top: 4px;
}
.snakLine:nth-child(odd)::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 28px;
  display: block;
  width: 60px;
  height: 68px;
  border: 4px solid #216ef4;
  border-radius: 0 100px 100px 0;
  border-left: 0px;
}
.snakLine:nth-child(even):after {
  content: '';
  display: block;
  position: absolute;
  top: 32px;
  left: 20px;
  width: 60px;
  height: 60px;
  border: 4px solid #216ef4;
  border-radius: 100px 0 0 100px;
  border-right: 0;
}

.main-box {
  width: fit-content;
  height: 100%;
  flex-direction: column;
  position: relative;
  z-index: 1;
  margin: 0px auto;
  display: flex;
  padding: 0;
  cursor: pointer;
  margin-bottom: 40px;
}
.main-box li {
  position: relative;
  /* min-width: 160px; */
  width: 230px;
  // height: 70px;
  margin: 40px 60px;
  padding: 10px 0;
  list-style: none;
  color: #fff;
  background-color: #576a96;
  border-radius: 15px;
  text-align: center;
  /* overflow: hidden; */
  cursor: pointer;
  &.reject {
    background-color: #ff3e5e;
  }
  &.process {
    background: #e6a23c;
  }
  &.unstart {
    background: #1ec07c;
  }
  i {
    position: absolute;
    right: -20px;
    color: #999;
    top: -20px;
    font-size: 20px;
  }
}
p {
  margin: 0;
  padding: 0 10px;
  font-size: 12px;
  overflow: hidden;
  height: 26px;
  line-height: 26px;
  display: flex;
  .title {
    text-align: right;
    width: 60px;
    display: inline-block;
  }
  .message {
    display: inline-block;
    text-align: left;
    min-width: 120px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-left: 10px;
  }
}
.main-box li:hover {
  box-shadow: 1px 1px 8px #c5c5c5;
}

.end-circle,
.begin-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #216ef4;
  position: absolute;
  right: calc(50% - 10px);
  top: -20px;
}
.end-circle {
  top: 100%;
}
.snakLine:nth-child(even) .end-circle {
  left: 25px;
}
.active {
  background-color: #f29d38 !important;
}
</style>
